<template>
    <div
        :id="detail.identifier"
        class="view-num-panel"
        :style="{
            borderRadius: detail.style.borderRadius + 'px',
            borderWidth: detail.style.waterBorderWidth + 'px',
            borderStyle: 'solid',
            borderColor: detail.style.waterBorderColor,
            overflow: 'hidden',
            transition: '0.3s',
        }"
    >
        <div
            :style="{
                width: '100%',
                height: '100%',
                borderImageSource: detail.style.url ? 'url(' + detail.style.url + ')' : null,
                borderImageSlice: '0 0 0 0 fill',
                borderImageRepeat: 'stretch',
            }"
        >
            <div
                class="panel-header"
                :style="{
                    borderBottomWidth: detail.style.waterBorderWidth + 'px',
                    borderBottomStyle: 'solid',
                    borderBottomColor: detail.style.waterBorderColor,
                    fontSize: detail.style.titleFontSize + 'px',
                    textAlign: detail.style.textAlign,
                    display: detail.style.titleVisible ? 'block' : 'none',
                    color: detail.style.foreColor,
                }"
            >
                {{ detail.dataBind.titleName }}
            </div>
            <div class="panel-body">
                <table class="table-wrap" cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                        <tr
                            class="item-row"
                            :style="{
                                fontSize: detail.style.fontSize + 'px',
                                textAlign: detail.style.textAlign,
                            }"
                            v-for="(item, index) in variableList"
                            :key="index"
                        >
                            <td v-if="getTdVisible('序号')" :style="{ color: getTdColor('序号') }" rowspan="1" colspan="1" class="item-cell">{{ index + 1 }}</td>
                            <td v-if="getTdVisible('设备')" :style="{ color: getTdColor('设备') }" rowspan="1" colspan="1" class="item-cell">{{ item.deviceName || '---' }}</td>
                            <td v-if="getTdVisible('从机')" :style="{ color: getTdColor('从机') }" rowspan="1" colspan="1" class="item-cell">{{ item.slaveName || '---' }}</td>
                            <td v-if="getTdVisible('变量名')" :style="{ color: getTdColor('变量名') }" rowspan="1" colspan="1" class="item-cell">{{ item.modelName || '---' }}</td>
                            <td v-if="getTdVisible('当前值')" :style="{ color: getTdColor('当前值') }" rowspan="1" colspan="1" class="item-cell">{{ item.value || 0 }}</td>
                            <td v-if="getTdVisible('单位')" :style="{ color: getTdColor('单位') }" rowspan="1" colspan="1" class="item-cell">{{ item.unit || '---' }}</td>
                            <td v-if="getTdVisible('更新时间')" :style="{ color: getTdColor('更新时间') }" rowspan="1" colspan="1" class="item-cell">{{ item.ts || '---' }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div v-show="false">{{ dataInit }}</div>
    </div>
</template>

<script>
import { mapState } from 'vuex';

import BaseView from './View';
import { getListVariable } from '@/api/scada/topo';

export default {
    name: 'ViewNumPanel',
    extends: BaseView,
    data() {
        return {
            variableList: [
                {
                    deviceName: 'XXX',
                    slaveName: 'XXX',
                    modelName: 'XXX',
                    value: 0,
                    unit: 'XXX',
                    ts: 'XXX',
                },
            ],
        };
    },
    computed: {
        ...mapState({
            mqttData: (state) => state.topoEditor.mqttData,
        }),
        dataInit() {
            if (Object.keys(this.mqttData).length !== 0) {
                const type = Number(this.$route.query.type);
                let bindNum = this.detail.dataBind.serialNumber;
                let mqttNum = this.mqttData.serialNumber;
                let mqttDeviceId = this.mqttData.sceneModelDeviceId;
                if (type === 1) {
                    bindNum = this.$route.query.serialNumber;
                }
                if (type === 2) {
                    if (mqttNum) {
                        for (let i = 0; i < this.mqttData.message.length; i++) {
                            this.variableList.forEach((item) => {
                                if (item.identifier === this.mqttData.message[i].id) {
                                    item.value = this.mqttData.message[i].value;
                                }
                            });
                        }
                    }
                    if (mqttDeviceId) {
                        for (let i = 0; i < this.mqttData.message.length; i++) {
                            this.variableList.forEach((item) => {
                                if (item.id === `${mqttDeviceId}-${this.mqttData.message[i].id}`) {
                                    item.value = this.mqttData.message[i].value;
                                }
                            });
                        }
                    }
                } else {
                    if (bindNum && bindNum === mqttNum) {
                        for (let i = 0; i < this.mqttData.message.length; i++) {
                            this.variableList.forEach((item) => {
                                if (item.id === this.mqttData.message[i].id) {
                                    item.value = this.mqttData.message[i].value;
                                }
                            });
                        }
                    }
                }
            }
        },
    },
    async mounted() {
        if (!this.editMode) {
            await this.getVariableList();
            this.initValue();
        }
    },
    methods: {
        // 查询设备实时数据列表
        getVariableList() {
            return new Promise((resolve) => {
                let { type, guid } = this.$route.query;
                type = Number(type);
                const params = {
                    scadaGuid: guid,
                    type: type,
                    page: 1,
                    size: 9999,
                };
                getListVariable(params).then((res) => {
                    if (res.code == 200) {
                        const { identifiers, sceneModelDeviceIds } = this.detail.dataBind;
                        if (type === 2) {
                            const list = res.rows.map((item) => ({ ...item, id: item.sceneModelDeviceId + '-' + item.identifier }));
                            this.variableList = identifiers.map((item, index) => {
                                const data = list.find((chil) => chil.id === `${sceneModelDeviceIds[index]}-${item}`);
                                return { ...data, value: 0 };
                            });
                        } else {
                            const list = res.rows.map((item) => ({ ...item, id: item.identifier }));
                            this.variableList = identifiers.map((item) => {
                                const data = list.find((chil) => chil.id === item);
                                return { ...data, value: 0 };
                            });
                        }
                        resolve();
                    }
                });
            });
        },
        // 获取td显隐
        getTdVisible(name) {
            const { tableColumnList } = this.detail.dataBind;
            const obj = tableColumnList.find((item) => item.columnName === name);
            return obj ? true : false;
        },
        // 获取td颜色
        getTdColor(name) {
            const { tableColumnList } = this.detail.dataBind;
            const obj = tableColumnList.find((item) => item.columnName === name);
            return obj ? obj.color : null;
        },
        // 设置初始值
        initValue() {
            const { modelValues, modelTimes } = this.detail.dataBind;
            this.variableList.forEach((item, index) => {
                item.value = modelValues[index];
                item.ts = modelTimes[index];
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.view-num-panel {
    width: 100%;
    height: 100%;

    .panel-header {
        padding: 12px 14px;
        box-sizing: border-box;
    }

    .panel-body {
        padding: 14px;

        .table-wrap {
            width: 100%;

            .item-row {
                .item-cell {
                    padding: 6px 0;
                    min-width: 0;
                    box-sizing: border-box;
                    vertical-align: middle;
                    position: relative;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
                    word-break: break-all;
                    line-height: 23px;
                    padding-left: 10px;
                    padding-right: 10px;
                }
            }
        }
    }
}
</style>
